//------------------------------------------------------------------------------
// @description 超级管理员端-个人中心
//------------------------------------------------------------------------------
<script setup  name="User">
//------------------------------------------------------------------------------
// 模块导入
//------------------------------------------------------------------------------
import { ref } from 'vue';
import userModifyPassword from '@/views/userModifyPassword.vue';
import { ElMessage } from 'element-plus';

import service from '@/utils/request';

//------------------------------------------------------------------------------
// 数据存储
//------------------------------------------------------------------------------
const userDate = ref({
    avaterURL: '',
    name: '',
    id: '',
    academy: '',
    password: '',
});
const isShowDialog = ref(false);// 是否显示修改密码对话框


//------------------------------------------------------------------------------
// 数据处理方法
//------------------------------------------------------------------------------
const modifySaveClick = (nwePassword) => {
    service({
        method: "post",
        url: "/admin/resetPassword",
        headers: {
            Authorization: localStorage.getItem('token'),   
        },
        data: {
            oldPassword: userDate.value.password,
            newPassword: nwePassword,
        }
    }).then((res) => {
        if (res.data.message === '请求正常') {
            isShowDialog.value = false;
            ElMessage({
                message: '密码重置成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: '密码重置失败',
                type: 'error',
            })
        }
    })
}
</script>

<template>
    <userModifyPassword 
    :isShowDialog="isShowDialog" 
    :oldPassword="userDate.password"
    @ModifyCancel="isShowDialog = false"
    @ModifySave="modifySaveClick"
    ></userModifyPassword>
    <div class="User">
        <div class="layout">
            <div class="content avatar">
                <div>头像</div>
                <div class="img">
                    <img :src="userDate.avaterURL" alt="">
                </div>
            </div>
            <div class="content">
                <div>姓名</div>
                <div class="data">{{ userDate.name }}</div>
            </div>
            <div class="content">
                <div>工号</div>
                <div class="data">{{ userDate.id }}</div>
            </div>
            <div class="content">
                <div>学院</div>
                <div class="data">{{ userDate.academy }}</div>
            </div>
            <div class="content">
                <div>密码</div>
                <div class="modify">
                    <span @click="isShowDialog = true">修改</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.User {
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    font-weight: 500;
    .layout{
        width: 94%;
        height: 70%;
        margin-top: 7vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 15px;
        background-color: white;
        .content{
            width: 25%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            overflow: hidden;
            white-space: nowrap;
            font-size: 18px;
            .data{
                width: 70%;
                height: 25px;
                padding-left: 5px;
                border-radius: 3px;
                line-height: 25px;
                background-color: #f2f3f5;
                color:#bcc1c8;
                font-size: 15px;
            }
            .modify{
                width: 70%;
                height: 25px;
                padding-left: 5px;
                color: #3874ff;
                font-size: 15px;
            }
        }
        .avatar{
            .img{
                width: 70%;
                img{
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    border: 1px solid rgb(0, 0, 0);
                }                
            }
        }
    }
}
</style>